<template>
  <div>
      <div class="crumbs">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                  <i class="el-icon-lx-calendar"></i> 财务管理
              </el-breadcrumb-item>
              <el-breadcrumb-item>代练申请</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div class="container">
          <div class="handle-box">
              <el-row>
                  <el-col :span="4">
                      <el-date-picker
                              v-model="query.start_time"
                              type="datetime"
                              placeholder="开始时间">
                      </el-date-picker>
                  </el-col>
                  <el-col :span="4">
                      <el-date-picker
                              v-model="query.end_time"
                              type="datetime"
                              placeholder="结束时间">
                      </el-date-picker>
                  </el-col>

                  <!-- 状态筛选 -->
                  <el-col :span="3" style="margin-left: 1%">
                    <el-select v-model="query.status" placeholder="状态">
                      <el-option label="全部" value=""></el-option>
                      <el-option label="待审核" :value="1"></el-option>
                      <el-option label="审核拒绝" :value="2"></el-option>
                      <el-option label="审核通过" :value="3"></el-option>
                    </el-select>
                  </el-col>

                  <el-col :span="4" style="margin-left: 6%;display: flex;">
                      <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                      <el-button type="primary" @click="queryReset">重置</el-button>
                  </el-col>
              </el-row>
          </div>
          <el-table
              id="repottable"
              :data="tableData"
              v-loading="loading"
              class="table"
              ref="multipleTable"
              header-cell-class-name="table-header"
              @selection-change="handleSelectionChange"
          >
              <el-table-column type="selection" width="55" align="center"></el-table-column>
              <el-table-column 
                label="序号" 
                width="40" 
                align="center">
                <template slot-scope="scope">
                  {{ (query.page - 1) * query.pageSize + scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="game_name" label="游戏名称" width="100" align="center"></el-table-column>
              <el-table-column prop="user_id" label="用户ID" width="80" align="center"></el-table-column>
              <el-table-column prop="phone" label="手机号" width="120" align="center"></el-table-column>
              <el-table-column prop="wechat" label="微信号" width="80" align="center"></el-table-column>
              <el-table-column prop="status" label="状态" width="80" align="center">
                <template slot-scope="scope">
                  {{ statusText(scope.row.status) }}
                </template>
              </el-table-column>
              <el-table-column prop="self_intro" label="自我介绍" width="180" align="center">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" :content="scope.row.self_intro" placement="top" v-if="scope.row.self_intro && scope.row.self_intro.length > 40">
                    <span>{{ scope.row.self_intro.slice(0, 40) + '...' }}</span>
                  </el-tooltip>
                  <span v-else>{{ scope.row.self_intro }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="file_info" label="视频/文件" width="120" align="center">
                <template slot-scope="scope">
                  <template v-if="scope.row.file_info && scope.row.file_info.endsWith('.mp4')">
                    <el-link type="primary" @click="previewVideo(scope.row.file_info)">预览视频</el-link>
                  </template>
                  <template v-else-if="scope.row.file_info">
                    <a :href="scope.row.file_info" target="_blank">查看文件</a>
                  </template>
                  <template v-else>无</template>
                </template>
              </el-table-column>
              <el-table-column prop="created_at" label="申请时间" width="130" align="center">
                <template slot-scope="scope">
                      {{ scope.row.created_at }}
                      </template>
              </el-table-column>
              <el-table-column prop="refused_reason" label="审核拒绝原因" width="100" align="center"></el-table-column>
              <el-table-column label="操作" width="220" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" @click="showDetail(scope.row)">详情</el-button>
                  <el-button v-if="scope.row.status === 1" size="mini" type="success" @click="approveApply(scope.row)" :disabled="scope.row.status !== 1">审核通过</el-button>
                  <el-button v-if="scope.row.status === 1" size="mini" type="danger" @click="openRejectDialog(scope.row)" :disabled="scope.row.status !== 1">审核拒绝</el-button>
                </template>
              </el-table-column>
          </el-table>
          <div class="pagination">
              <el-pagination
                  background
                  layout="total, prev, pager, next, sizes"
                  :page-sizes="[10, 20, 50, 100, 500, 1000]"
                  @size-change="handleSizeChange"
                  :current-page="query.page"
                  :page-size="query.pageSize"
                  :total="pageTotal"
                  @current-change="handlePageChange"
              ></el-pagination>
          </div>
      </div>
      <el-dialog title="视频预览" :visible.sync="videoDialogVisible" width="40%" @close="closeVideoDialog">
        <video v-if="videoUrl" :src="videoUrl" controls style="width:100%"></video>
      </el-dialog>
      <el-dialog title="详情" :visible.sync="detailDialogVisible" width="40%">
        <el-form v-if="detailData" label-width="100px">
          <el-form-item label="游戏名称">{{ detailData.game_name }}</el-form-item>
          <el-form-item label="用户ID">{{ detailData.user_id }}</el-form-item>
          <el-form-item label="联系手机号">{{ detailData.phone }}</el-form-item>
          <el-form-item label="联系微信号">{{ detailData.wechat }}</el-form-item>
          <el-form-item label="状态">{{ statusText(detailData.status) }}</el-form-item>
          <el-form-item label="自我介绍">{{ detailData.self_intro }}</el-form-item>
          <el-form-item label="视频/文件">
            <template v-if="detailData.file_info && detailData.file_info.endsWith('.mp4')">
              <el-link type="primary" @click="previewVideo(detailData.file_info)">预览视频</el-link>
            </template>
            <template v-else-if="detailData.file_info">
              <a :href="detailData.file_info" target="_blank">查看文件</a>
            </template>
            <template v-else>无</template>
          </el-form-item>
          <el-form-item label="审核拒绝原因">{{ detailData.refused_reason }}</el-form-item>
          <el-form-item label="创建时间">{{ detailData.created_at }}</el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="detailData && detailData.status === 1">
          <el-button type="success" @click="approveApply(detailData)">审核通过</el-button>
          <el-button type="danger" @click="openRejectDialog(detailData)">审核拒绝</el-button>
        </div>
      </el-dialog>
      <el-dialog title="审核拒绝" :visible.sync="rejectDialogVisible" width="30%">
        <el-form>
          <el-form-item label="拒绝原因" label-width="80px">
            <el-input type="textarea" v-model="rejectReason" placeholder="请输入拒绝原因"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="rejectDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="submitReject">确定拒绝</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
name: 'payment_statement',
data() {
  return {
    query: {
      page: 1,
      pageSize: 10,
      platform: '',
      business_type: '',
      start_time: '',
      end_time: '',
      status: '' // 新增状态筛选
    },
    InfoVisible: false,
    order_info: {},
    loading: false,
    tableData: [],
    multipleSelection: [],
    pageTotal: 0,
    delList: [],
    idx: -1,
    id: -1,
    videoDialogVisible: false,
    videoUrl: '',
    detailDialogVisible: false,
    detailData: null,
    rejectDialogVisible: false,
    rejectRow: null,
    rejectReason: '',
    //获取列表请求
    getList: function() {
      let that = this;
      this.api.get('daiLianApply-page', this.query, res => {
        that.tableData = res.data.list;
        that.query.page = res.data.page;
        that.query.pageSize = res.data.pageSize;
        that.pageTotal = res.data.pageTotal;
      }, undefined, undefined, this);
    }
  };
},
created() {
  this.getList();
},
methods: {
  // 重置查询条件
  queryReset() {
    this.query = {
      page: 1,
      pageSize: 10,
      platform: '',
      business_type: '',
      start_time: '',
      end_time: '',
      status: '' // 重置时也要重置状态
    };
    this.getList();
  },
  // 触发搜索按钮
  handleSearch() {
    this.$set(this.query, 'page', 1);
    this.getList();
  },
  exportSource() {
    this.api.exportExcel(document.querySelector('#repottable'), '支付宝对账单数据表');
  },
  handleSizeChange(val) {
    this.query.pageSize = val;
    this.getList();
  },
  InfoView(index, row) {
    this.order_info = row;
    this.InfoVisible = true;
  },
  // 多选操作
  handleSelectionChange(val) {
    this.multipleSelection = val;
  },
  // 删除操作
  handleDelete(index, row) {
    this.delLists([row.id], '删除成功');
  },
  // 分页导航
  handlePageChange(val) {
    this.$set(this.query, 'page', val);
    this.getList();
  },
  statusText(status) {
    switch (status) {
      case 1:
        return '待审核';
      case 2:
        return '审核拒绝';
      case 3:
        return '审核通过';
      default:
        return '-';
    }
  },
  previewVideo(url) {
    this.videoUrl = url;
    this.videoDialogVisible = true;
  },
  closeVideoDialog() {
    this.videoUrl = '';
    this.videoDialogVisible = false;
  },
  showDetail(row) {
    this.detailData = row;
    this.detailDialogVisible = true;
  },
  approveApply(row) {
    this.$confirm('确定要审核通过该申请吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'success'
    }).then(() => {
      this.api.get('daiLianApply-approve', { id: row.id }, res => {
        this.$message.success('审核通过成功');
        setTimeout(() => { this.getList(); }, 300); // 审核通过后刷新列表
      });
    });
  },
  openRejectDialog(row) {
    this.rejectRow = row;
    this.rejectReason = '';
    this.rejectDialogVisible = true;
  },
  submitReject() {
    if (!this.rejectReason) {
      this.$message.error('请填写拒绝原因');
      return;
    }
    this.api.get('daiLianApply-reject', { id: this.rejectRow.id, refused_reason: this.rejectReason }, res => {
      this.$message.success('已拒绝');
      this.rejectDialogVisible = false;
      setTimeout(() => { this.getList(); }, 300); // 审核拒绝后刷新列表
    });
  },
}
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 150px;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.gl_t{
  font-weight: bold;
}
</style>